<template>
  <div>
    <div class="con-box uc-coupons">
      <!-- [!visible ?'con-box uc-coupons ':'popup-mask'] -->
      <div class="uc-nav">
        <div class="nav-box">
          <div :class="['nav-item', status === 1 ? 'active' : '']">
            <span class="text" @click="getCouponList(1)">
              {{$t('coupons.notUsed')}}
              <em class="number">{{ unUseCount }}</em>
            </span>
            <i class="line"></i>
          </div>
          <div :class="['nav-item', status === 2 ? 'active' : '']">
            <span class="text" @click="getCouponList(2)">
              {{$t('coupons.alreadyUse')}}
              <em class="number">{{ useCount }}</em>
            </span>
            <i class="line"></i>
          </div>
          <div :class="['nav-item', status === 0 ? 'active' : '']">
            <span class="text" @click="getCouponList(0)">
              {{$t('coupons.expired')}}
              <em class="number">{{ expiredCount }}</em>
            </span>
            <i class="line"></i>
          </div>
        </div>
      </div>
      <div class="popup-mask" v-if="visible"></div>
      <div class="coupons-list">
        <!-- <div class="popup-mask"> -->
        <div
          :class="language == 'zh' ? ['item', status === 2 ? 'item coupon-used' : status === 0 ? 'item coupon-over' : 'item'
          ] : ['item', status === 2 ? 'item coupon-used-en' : status === 0 ? 'item coupon-over-en' : 'item'
          ]"
          v-for="item in dataList"
          :key="item.couponUserId"
        >
          <a
            href="JavaScript:;"
            @click="deletePop(item)"
            class="coupon-close"
          ></a>
          <div class="coupon-type">
            <div class="coupon-price">
              <div class="price">
                <div class="small" v-if="item.couponType === 1">￥</div>
                <span class="big" v-if="item.couponType === 1">{{
                  item.reduceAmount
                }}</span>
                <div class="big" v-if="item.couponType === 2">
                  {{ item.couponDiscount }}&nbsp;
                </div>
                <span class="small" v-if="item.couponType === 2"> {{ $t('fold')}}</span>
              </div>
              <span class="limit" v-if="$t('language')=='zh'">满￥{{ item.cashCondition }}可用</span>
              <span class="limit" v-if="$t('language')=='en'">{{$t('available')}} {{$t('over')}} ￥{{ item.cashCondition }}</span>
            </div>
            <div class="coupon-time">{{$t('coupons.validUntil')}}：{{ item.endTime }}</div>
          </div>
          <div class="coupon-info">
            <div class="range">
              <div class="range-item">
                <span class="label">{{$t('coupons.limitedFcategory')}}：</span>
                <div
                  class="range"
                  v-if="item.shopId === 0 && item.suitableProdType === 0"
                >
                  {{$t('coupons.canUsedToPurchaseTheFullRangeOfProductsOnThePlatform')}}
                </div>
                <div
                  class="range"
                  v-if="item.shopId != 0 && item.suitableProdType === 0"
                >
                  {{$t('coupons.canUsedToPurchaseFullRangeOfProductsFromSelectedStores')}}
                </div>
                <div
                  class="range"
                  v-if="
                    item.suitableProdType === 1 || item.suitableProdType === 2
                  "
                >
                  {{$t('coupons.canBeUsedToPurchaseSelectedItems')}}
                </div>
              </div>
              <div class="range-item">
                <span class="label">{{$t('coupons.limitedPlatform')}}：</span>
                <!-- suitableProdType 适用商品类型 0全部商品参与 1指定商品参与 2指定商品不参与， shopId === 0平台券， shopId != 0店铺券 -->
                <div v-if="item.shopId === 0" :style="{marginLeft:$t('language')=='en'?'10px':''}">
                  <div class="range" v-if="item.suitableProdType === 0">
                    {{$t('coupons.universalAcrossAllPlatforms')}}
                  </div>
                  <div
                    class="range"
                    v-if="
                      item.suitableProdType === 1 || item.suitableProdType === 2
                    "
                  >
                    {{$t('coupons.availableForSelectedProductsAcrossAllPlatforms')}}
                  </div>
                </div>
                <div v-if="item.shopId != 0">
                  <div class="range" v-if="item.suitableProdType === 0">
                    {{$t('coupons.availableForAllProductsInDesignatedStores')}}
                  </div>
                  <div
                    class="range"
                    v-if="
                      item.suitableProdType === 1 || item.suitableProdType === 2
                    "
                  >
                    {{$t('coupons.someItemsAvailableInSelectedStores')}}
                  </div>
                </div>
              </div>
            </div>
            <a href="JavaScript:;" @click="userCoupon(item)" class="coupon-btn"
              >{{$t('coupons.useNow')}}</a
            >
          </div>
        </div>
        <!-- </div> -->
        <div class="popup-box" v-if="visible">
          <div class="tit">
            <div class="text">{{$t('tips')}}</div>
            <div class="close" @click="cancelDel()"></div>
          </div>
          <div class="con">
            <div class="tip" v-if="status === 1">
              <div class="tip-icon warning"></div>
              <div class="tip-info">
                <div class="result">{{$t('coupons.sureDeleteTheCoupon')}}</div>
                <div class="date">{{$t('coupons.deletedCouponsWillNotBeRestored')}}</div>
                <div class="btns">
                  <a href="JavaScript:;" @click="deleteCoupon()" class="btn-r"
                    >{{$t('delete')}}</a
                  >
                  <a href="JavaScript:;" class="btn-g" @click="cancelDel()"
                    >{{$t('cancel')}}</a
                  >
                </div>
              </div>
            </div>
            <div class="tip" v-else>
              <div class="tip-icon warning"></div>
              <div class="tip-info">
                <div
                  class="result"
                  style="line-height: 30px;margin-bottom: 30px;"
                >
                  {{$t('coupons.sureDeleteTheCoupon')}}
                </div>
                <div class="btns" style="margin-left: -30px;">
                  <a href="JavaScript:;" @click="deleteCoupon()" class="btn-r"
                    >{{$t('delete')}}</a
                  >
                  <a href="JavaScript:;" class="btn-g" @click="cancelDel()"
                    >{{$t('cancel')}}</a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /弹窗 -->
      </div>
      <!-- 页码 -->
      <pagination
        v-model="current"
        :pages="pages"
        @changePage="getCouponPage()"
      ></pagination>
      <!-- 页码 -->
      <!-- 空列表提示 -->
      <div class="empty" v-if="!dataList.length">
        <div class="img">
          <img src="~/assets/images/emptyPic/coupon-empty.png" alt />
        </div>
        <div class="action">
          <div class="text">{{$t('coupons.noRelatedCoupons')}}</div>
          <nuxt-link to="/" class="btn">{{$t('lookAtOther')}}</nuxt-link>
        </div>
      </div>
      <!-- /空列表提示 -->
    </div>
  </div>
</template>

<script>
import Pagination from '~/components/pagination'
export default {
  data () {
    return {
      showLogin: false,
      nickName: '',
      dataList: [],
      status: 1,
      visible: false,
      useCount: 0,
      unUseCount: 0,
      delCoupon: null,
      expiredCount: 0,
      dataListProd: [],
      pages: 0, // 总页数
      current: this.$route.query.current || 1, // 当前页数
      language: this.$store.state.locale,
    }
  },
  components: {
    Pagination
  },
  mounted () {
    document.title = this.$t('coupons.myCoupons')
    this.visible = false
    this.getCouponList(1)
    this.getCouponCount()
  },
  methods: {
    /**
    * 获取券列表
    */
    getCouponList (status) {
      if (this.status != status) {
        this.status = status
        this.current = 1
      }
      this.$axios.get('/p/myCoupon/getCouponList', {
        params: {
          status: status,
          current: this.current,
          size: 12,
        }
      }).then(({ data }) => {
        this.dataList = data.records
        this.pages = data.pages
      })
    },

    /**
    * 获取各分类数量
    */
    getCouponCount () {
      this.$axios.get('/p/myCoupon/getMyCouponsStatusCount', {
      }).then(({ data }) => {
        this.expiredCount = data.expiredCount
        this.unUseCount = data.unUseCount
        this.useCount = data.useCount
      })
    },

    /**
    * 删除弹窗
    */
    deletePop (item) {
      this.visible = true
      this.delCoupon = item
    },

    /**
    * 取消删除
    */
    cancelDel (item) {
      this.visible = false
    },

    /**
    * 优惠券使用跳转商品列表
    */
    userCoupon (item) {
      if (item.shopId === 0) {
        // 平台券 跳转到商品列表页
        this.$router.push({ path: '/list?st=4&couponId=' + item.couponId })
      } else if (item.shopId != 0 && item.suitableProdType === 1 || item.suitableProdType === 2) {
        // 店铺券 指定商品可用  对应店铺商品列表
        this.$router.push({ path: '/shopIndex?st=4&sid=' + item.shopId + '&couponId=' + item.couponId })
      }
      else if (item.shopId != 0 && item.suitableProdType === 0) {
        // 店铺券 店铺内所有商品可用 跳转店铺页面
        this.$router.push({ path: '/shopIndex?sid=' + item.shopId })
      }
    },

    /**
    * 删除优惠券
    */
    deleteCoupon () {
      this.$axios.delete('/p/myCoupon/delCoupon/' + this.delCoupon.couponUserId, {
      }).then(({ data }) => {
        if (data) {
          this.visible = false
          this.$message({
            message: data,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.getCouponList(this.status)
              this.getCouponCount()
            }
          })
        }
      })
    },
    /**
     * 请求券列表
     */
    getCouponPage () {
      this.getCouponList(this.status)
    },
  }
}
</script>

<style scoped src='~/assets/css/uc-coupons.css'></style>
<style scoped src='~/assets/css/user-center.css'></style>
